<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>
    <script src="../js/lib/react.min.js"></script>
    <script src="../js/lib/react-dom.min.js"></script>
    <script src="../js/lib/jquery.min.js"></script>
    <script src="../js/lib/browser.min.js"></script>
    <script src="../js/lib/marked.js"></script>
  </head>

  <body>
    <div id="example">aaaa</div>
    <div id="example2">aaaa</div>
    <script type="text/babel">
		var HelloWorld = React.createClass({
		  render: function() {
		    return (
		      <p>
		        Hello, <input type="text" placeholder="Your name here" />!
		        It is {this.props.date.toTimeString()}
		      </p>
		    );
		  }
		});

		setInterval(function() {
		  ReactDOM.render(
		    <HelloWorld date={new Date()} />,
		    document.getElementById('example')
		  );
		}, 500);
    </script>

    <script type="text/babel">
		var HelloWorld2 = React.createClass({
		  render: function() {
		    return (
		      <p>
		        Hello2aaaaaaaaaaaaaaaaaaaa
		      </p>
		    );
		  }
		});

	  ReactDOM.render(
	    <HelloWorld2 />,
	    document.getElementById('example2')
	  );
	
	ReactDOM.render(
	    <HelloWorld2 />,
	    document.getElementById('example')
	  );
    </script>

  </body>
</html>